<script setup lang="ts">
</script>

<template>
  <div class="findImageContainer">
    <div class="card-list">
      <van-divider>03 月</van-divider>
      <div class="card-item">
        <div class="card-li">
          <img
            src="https://img1.baidu.com/it/u=1122737613,1740562972&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
            alt="img.jpg"
          />
          <div>2020-03-03</div>
        </div>
        <div class="card-li">
          <img
            src="https://img1.baidu.com/it/u=1122737613,1740562972&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
            alt="img.jpg"
          />
          <div>2020-03-01</div>
        </div>
        <div class="card-li">
          <img
            src="https://img1.baidu.com/it/u=1122737613,1740562972&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
            alt="img.jpg"
          />
          <div>2020-03-01</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.findImageContainer {
  margin: 70px 20px 100px;
  .card-list {
    width: 100%;
    .card-item {
      display: grid;
      /*  声明列的宽度  */
      grid-template-columns: repeat(2, 50%);
      /*  声明行间距和列间距  */
      grid-gap: 10px;
      /*  声明行的高度  */
      grid-template-rows: auto;
      border-radius: 20px;
      text-align: center;
      .card-li {
        border-radius: 10px;
        box-shadow: 1px 1px 3px 1px #999;
        overflow: hidden;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
}
</style>